<script lang='ts' setup>
import { PropType, reactive, watch } from 'vue'
import { new_v2ray_outbound_freedom, V2rayOutboundFreedom } from '@/apis/application/v2ray/structs.ts'
import { v2ray_set_outbound_freedom } from '@/apis/application/v2ray/v2ray_set_outbound_freedom.ts'
import ApplicationV2rayBoundStreamSettings from '@/components/applications/v2ray/ApplicationV2rayBoundStreamSettings.vue'

const emits = defineEmits(['update:show', 'success'])
const props = defineProps({
  show: { required: true, type: Boolean },
  protocol: { required: true, type: Object as PropType<V2rayOutboundFreedom> }
})

watch(props, (_, n) => {
  if (n.show) {
    state.freedom = JSON.parse(JSON.stringify(n.protocol))
  }
})

const state = reactive<{ freedom: V2rayOutboundFreedom, saving: boolean }>({ freedom: new_v2ray_outbound_freedom(), saving: false })

async function close(): Promise<void> {
  emits('update:show', false)
}

async function save(): Promise<void> {
  if ('' === state.freedom.outbound_send_through.trim()) {
    window.$message.error('出站地址不能为空')

    return
  }

  state.saving = true
  const response = await v2ray_set_outbound_freedom(state.freedom)
  state.saving = false

  if (0 !== response.code) {
    window.$message.error(response.message)

    return
  }

  window.$message.success('添加成功，重启应用后生效')

  emits('success')
  await close()
}
</script>

<template>
  <n-modal :closable='false' :close-on-esc='false' :mask-closable='false' :show='props.show' class='v2ray-bound-modal' transform-origin='center'>
    <n-card>
      <n-space vertical>
        <n-divider>出站基础配置</n-divider>
        <div>
          <n-space :wrap-item='false' align='center'>
            <div class='width-05'>
              <n-input-group>
                <n-input-group-label size='small'>配置ID</n-input-group-label>
                <n-input v-model:value='state.freedom.id' placeholder='配置ID，可以为空，为空时创建新的配置' size='small' />
              </n-input-group>
            </div>
            <div class='flex-max'>
              <n-input-group>
                <n-input-group-label size='small'>配置标签</n-input-group-label>
                <n-input v-model:value='state.freedom.tag' placeholder='配置标签，可以为空，不为空时必须唯一' size='small' />
              </n-input-group>
            </div>
          </n-space>
        </div>
        <div>
          <n-space :wrap-item='false' align='center'>
            <div class='width-max'>
              <n-input-group>
                <n-input-group-label size='small'>出站IP</n-input-group-label>
                <n-input v-model:value='state.freedom.outbound_send_through' placeholder='出站IP，默认为0.0.0.0' size='small' />
              </n-input-group>
            </div>
          </n-space>
        </div>
        <n-divider>Freedom协议配置</n-divider>
        <div>
          <n-space :wrap-item='false' align='center'>
            <div class='flex-max'>
              <n-space :wrap-item='false' align='center'>
                <div>转发模式</div>
                <div class='flex-max'>
                  <n-select v-model:value='state.freedom.domain_strategy' :options='[{label: "AsIs", value: "AsIs"}, {label: "UseIP", value: "UseIP"}, {label: "UseIPv4", value: "UseIPv4"}, {label: "UseIPv6", value: "UseIPv6"}]' class='width-max' size='small' />
                </div>
              </n-space>
            </div>
            <div class='width-05'>
              <n-input-group>
                <n-input-group-label size='small'>重定向地址</n-input-group-label>
                <n-input v-model:value='state.freedom.redirect' placeholder='重定向输出地址，不为空时所有流量将被强制重定向到此地址' size='small' />
              </n-input-group>
            </div>
            <div>
              <n-input-group>
                <n-input-group-label size='small'>用户级别</n-input-group-label>
                <n-input-number v-model:value='state.freedom.user_level' placeholder='用户级别，默认为0，仅用于本地策略' size='small' />
              </n-input-group>
            </div>
          </n-space>
        </div>
        <ApplicationV2rayBoundStreamSettings :stream='state.freedom.stream_settings' />
        <div>
          <n-space align='center' justify='center'>
            <n-button size='small' type='error' @click='close'>取消</n-button>
            <n-button size='small' type='primary' @click='save'>保存</n-button>
          </n-space>
        </div>
      </n-space>
    </n-card>
  </n-modal>
</template>

<style scoped>

</style>
